<!-- 
 * 字典管理
 * @author: 
 * @since: 2022-04-07
 * index.vue
-->
<template>
    <div class="dict-container h100">
        <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
        <div v-show="routerCutLevel === 2" class="listPage">
            <div class="search">
                <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
            </div>
            <div class="table">
                <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="tableEventCom" @colSelect="colSelect" @refresh="getDictTableList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="150" :isShowCheckbox="false">
                    <el-button type="primary" @click="addDict">新增字典</el-button>
                    <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
                </TableCom>
            </div>
        </div>
        <dictItemDrawer :isShowDrawer="isShowDictDrawer" type="dict" :dictData="state.dictData" @close="closeDictItemDrawer" :dictItemData="state.dictItemData" @refresh="getDictTableList()"></dictItemDrawer>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import {getDictListApi, getDictItemListApi, batchHandleDictItemApi } from '@/api/interface/dict.js'

import { colFilters } from '@/utils/common.js'
import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()

const routerCutLevel = computed(() => {
    return store.getters['setting/routerCutLevel']
})

const state = reactive({
    dictData: {},//字典数据

    formModel: {
        //搜索列表的参数
        keyName: '', //字典名称
    },
    formLabel: [
        {
            label: '字典名称',
            model: 'keyName',
            type: 'text',
            width: '160',
            placeholder: '请输入字典名称',
        },
    ],
    tableHeader: [
        {
            label: '字典名称',
            prop: 'keyName',
        },
        {
            label: '字典说明',
            prop: 'keyExplain',
        },
        {
            label: '字典状态',
            prop: 'valid',
            status: true,
        },
    ],
    tableData: [], //表格数据
    pagination: {
        //分页信息
        currentPage: 1,
        size: 10,
        total: 0,
    },
    btnData: [
        {
            name: '编辑',
            icon: 'bianji',
            color: '#25D390',
            change: 'edit',
        },{
            name: '字典项',
            icon: 'bianji',
            color: '#25D390',
            change: 'toTtem',
        },
    ],
    selectTableId: [], //表格选中的数据
})
//区域加载
const loading = ref(true)
//是否展示字典项右侧抽屉
const isShowDictDrawer = ref(false)

//字典管理模块功能按钮
const btnList = reactive([])

onMounted(() => {
    getDictTableList()
})
//获取字典管理列表数据
const getDictTableList = (data) => {
    loading.value = true
    const params = {
        ipi: state.pagination.currentPage,
        ips: state.pagination.size,
        keyName: state.formModel.keyName,
    }
    getDictListApi(params).then((res) => {
        const { status, data } = res
        if (status === 200) {
            loading.value = false
            state.tableData = data.result
            state.pagination.total = data.total
            state.pagination.currentPage = data.pageNum
            state.pagination.size = data.pageSize
        }
    })
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
    if (type === 'filter') {
        const currentData = colFilters(data, e, currentItem, state.tableHeader)
        state.tableHeader = currentData
    } else {
        //全选/全取消
        state.tableHeader = data
    }
}
//选择表格数据
const getSelectChange = (row) => {
    state.selectTableId = row.map((item) => item.id)
}

//表格中的操作
const tableEventCom = (type, data) => {
    console.log('data', data);
    switch (type) {
        case 'toTtem': 
            router.push({ name: 'DictItem', params: data }).catch(() => { })
            break

        case 'edit':
            isShowDictDrawer.value = true
            state.dictData = data
            break
    }
}

//表格搜索
const filter = () => {
    getDictTableList()
}
//表格重置
const reset = () => {
    state.formModel.keyName = ''
    getDictTableList()
}

//点击条数
const getSizeChange = (val) => {
    state.pagination.size = val
    getDictTableList()
}

//点击当前页
const getCurrentChange = (val) => {
    state.pagination.currentPage = val
    getDictTableList()
}

//点击新增字典
const addDict = () => {
    isShowDictDrawer.value = true
}
//关闭字典项抽屉
const closeDictItemDrawer = () => {
    isShowDictDrawer.value = false
    state.dictData = {}
}
</script>

<style lang="scss" scoped></style>
